<template>
  <h1>投放记录查看</h1>
  <el-table
    :data="
      tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
    "
    :cell-style="{ textAlign: 'center' }"
    :header-cell-style="{ textAlign: 'center' }"
    style="width: 100%"
  >
    <el-table-column type="expand">
      <template #default="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="垃圾编号">
            <span>{{ props.row.gar_id }}</span>
          </el-form-item>
          <el-form-item label="垃圾类型">
            <span>{{ props.row.type }}</span>
          </el-form-item>
          <!--          <el-form-item label="检查员">-->
          <!--            <span>{{ props.row.id }}</span>-->
          <!--          </el-form-item>-->
          <el-form-item label="垃圾桶">
            <span>{{ props.row.dustbin_id }}</span>
          </el-form-item>
          <el-form-item label="运输车">
            <span>{{ props.row.truck_id }}</span>
          </el-form-item>
          <el-form-item label="处理状态">
            <span>{{
              props.row.status === 0
                ? "已创建"
                : props.row.status === 1
                ? "已入桶"
                : props.row.status === 2
                ? "运输中"
                : props.row.status === 3
                ? "到达处理站"
                : "失败"
            }}</span>
          </el-form-item>
          <el-form-item label="处理站">
            <span>{{ props.row.plant_name }}</span>
          </el-form-item>
          <el-form-item label="最新时间">
            <span>{{ props.row.latest_time }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="垃圾编号" prop="gar_id"> </el-table-column>
    <el-table-column label="处理状态">
      <template #default="scope">
        <el-tag
          disable-transitions
          effect="dark"
          :type="
            scope.row.status === 0
              ? 'primary'
              : scope.row.status === 1
              ? 'primary'
              : scope.row.status === 2
              ? 'primary'
              : scope.row.status === 3
              ? 'success'
              : 'danger'
          "
        >
          {{
            scope.row.status === 0
              ? "已创建"
              : scope.row.status === 1
              ? "已入桶"
              : scope.row.status === 2
              ? "运输中"
              : scope.row.status === 3
              ? "到达处理站"
              : "失败"
          }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="最新时间" prop="latest_time"> </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pagesize"
    :page-sizes="[5, 10, 20, 40]"
    layout="total,sizes,prev,pager,next,jumper"
    :total="tableData.length"
  ></el-pagination>
</template>

<script>
import { Base64 } from "js-base64";
export default {
  data() {
    return {
      ThrowRecord: {
        gar_id: "",
        type: "",
        dustbin_id: "",
        user_id: "",
        truck_id: "",
        status: "",
        latest_time: "",
        plant_name: "",
      },
      showDetail: false,
      tableData: [],
      currentPage: 1,
      pagesize: 5,
    };
  },
  methods: {
    handleSizeChange(size) {
      this.pagesize = size;
      console.log(this.pagesize);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage);
    },
  },
  mounted() {
    console.log(1);
    console.log(localStorage.token);
    console.log(Base64.decode(localStorage.username));
    const url =
      this.$URL + "/Garbage/GetAll?req=" + Base64.decode(localStorage.username);
    fetch(url, {
      method: "GET",
      headers: {
        accept: "text/plain",
        Authorization: "Bearer " + Base64.decode(localStorage.token),
      },
    }).then((response) => {
      console.log(response);
      let result = response.json();
      result.then((data) => {
        console.log(data);
        this.tableData = data;
      });
    });
  },
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
